<!-- 确认订单 -->
<template>
  <view class="order-wrap">
    <!-- 地址栏 -->
    <view class="head_box" @tap="jump('/pages/user/address/list', { from: 'order' })">
      <view class="add-address-box u-flex u-flex-1" v-if="!addressId">
        <view class="box-bg u-p-30 u-flex-1 u-flex u-row-between">
          <text class="select-notice">请选择收货地址</text>
          <u-icon name="arrow-right" size="28" color="#bfbfbf"></u-icon>
        </view>
      </view>
      <view class="add-address-box u-p-30" v-else>
        <view class="top u-flex">
          <text class="name">{{ addressData.name }}</text>
          <text class="phone">{{ addressData.phone }}</text>
          <text class="tag" v-show="addressData.is_default == 1">默认</text>
        </view>
        <view class="detail u-flex u-row-between">
          <view class="address">
            {{ addressData.city }}{{ addressData.address }}
          </view>
          <u-icon name="arrow-right" size="28" color="#bfbfbf"></u-icon>
        </view>
      </view>
    </view>

    <view class="u-m-b-10">
      <!-- 确认订单商品卡片 -->
      <view class="goods-list" v-for="g in perGoodsList" :key="g.sku_price_id">
        <view class="goods-card u-p-30">
          <shopro-mini-card :title="g.detail.title" :image="g.detail.image">
            <template #describe>
              <view class="order-sku u-ellipsis-1">
                <text class="order-num">
                  {{ g.detail.current_sku_price && g.detail.current_sku_price.goods_sku_text ? g.detail.current_sku_price.goods_sku_text : '' }}
                </text>
              </view>
            </template>
            <template #cardBottom>
              <view class="goods-price u-flex  u-row-between">
                <view class="">
                  <text v-show="orderType === 'score'">{{ g.detail.current_sku_price.score }}积分+</text>
                  <text>￥{{ g.detail.current_sku_price.price }}</text>
                </view>
                <text class="goods-num">x{{ g.goods_num }}</text>
              </view>
            </template>
          </shopro-mini-card>
        </view>

        <!-- 配送方式 -->
        <view class="logistic item-list u-flex u-row-between" @tap="onSelExpressType(g)">
          <view class="item-title">配送方式</view>
          <view class="u-flex">
            <view class="detail">{{ getCurGoodsExpress(g) }}</view>
            <u-icon name="arrow-right" size="28" color="#bfbfbf"></u-icon>
          </view>
        </view>
      </view>

      <!-- 选择商品 -->
      <view class="goods_number">

        <view class="number_whole">
          <view class="">
            请选择商品:
          </view>
          <view style="	display: flex;flex-wrap: wrap;">
            <view class="goods_dan" v-for="(item,index) in goods" :key="index">
              <view class="image">
                <image :src="item.image" mode=""></image>
              </view>
              <view class="title">{{item.title}}</view>
              <radio-group>
                <label>
                  <radio :checked="item.chose" @click="radioChange(index)" />
                </label>
              </radio-group>
            </view>
          </view>
        </view>
      </view>



      <block>
        <!-- 备注 -->
        <!-- <view class="remark-box u-flex item-list">
          <view class="item-title">备注</view>
          <input class="item-input u-p-30" placeholder-class="input-pl" type="text" v-model="remark"
            placeholder="建议留言前先于卖家沟通确认" />
        </view> -->
        <!-- 金额明细 -->
        <view class=" u-flex u-row-between item-list border-top u-m-b-10">
          <view class="item-title">商品金额</view>
          <view class="u-flex">
            <text class="price">￥{{ orderPre.goods_amount || '899.00' }}</text>
          </view>
        </view>
        <!-- 运费 -->
        <view class="price-box  u-flex u-row-between item-list">
          <view class="item-title">运费</view>
          <view class="u-flex">
            <text class="price">￥{{ orderPre.dispatch_amount || '0.00' }}</text>
          </view>
        </view>
      </block>
    </view>
    <!-- 底部 -->
    <view class="foot-box-wrap">
      <view class="foot-box u-flex u-row-between safe-area-inset-bottom">
        <view class="u-flex">
          <!-- <text class="num">共{{ totalNum }}件</text> -->
          <view class="all-money">
            <text>价格：</text>
            <text class="price">￥{{ price || '899.00' }}</text>
          </view>
        </view>
        <u-button shape="circle" :disabled="isDisabled" :loading="isDisabled" :custom-style="customStyle"
          :hair-line="false" hover-class="btn-hover" @click="isShow()">
          立即支付
        </u-button>
      </view>
    </view>
    <!-- <u-popup v-model="show" mode="center" border-radius="14" width="450"> -->
    <!-- <view class="pop">
        <view class="text">
          请输入支付密码
        </view>
        <u-input v-model="paypassword" type="password" placeholder="请输入支付密码" maxlength="6" /> -->
    <!-- <text>{{paypassword}}</text> -->
    <!-- </view>
      <u-button type="primary" style="width: 200rpx;height: 60rpx;margin-bottom: 20rpx;" @click="popChose">确认
      </u-button> -->
    <!-- 规格弹窗 -->
    <shopro-sku v-if="showSku" v-model="showSku" :goodsInfo="goodsDetail" :grouponBuyType='"sku"'
      @changeType="changeType" @getSkuText="getSkuText" @buy="goPay"></shopro-sku>
    <u-keyboard v-model="show" :tooltip="false" mode="number" :mask-close-able="false" :dot-enabled="false"
      @change="valChange" @backspace="backspace">
      <view class="pay-pwd">
        <view class="tit">
          <view>
            <u-icon name="close" @click="show = false"></u-icon>
          </view>
          <view>请输入支付密码</view>
          <view></view>
        </view>

        <u-message-input :focus="true" :value="paypassword" :disabled-keyboard="true" width="50" :maxlength="6"
          :breathe="true" :dot-fill="true"></u-message-input>
      </view>

    </u-keyboard>
    <!-- </u-popup> -->
    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>


  </view>
</template>

<script>
  // import myTurntableDraw from '@/components/my-turntable-draw/my-turntable-draw';
  import shSelectCoupon from './components/sh-select-coupon.vue';
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';
  import Auth from '@/shopro/permission/index.js';
  export default {
    components: {
      shSelectCoupon,
      // myTurntableDraw
    },
    data() {
      return {
        value: '',
        // // 中奖下标
        // 需多次获取
        showSku: false,
        indexNum: 10,
        platform: this.$platform.get(),
        totalNum: 0,
        couponList: [], //优惠券列表
        addressData: {}, //收货地址
        addressId: 0, //收货地址ID
        customStyle: {
          //自定义按钮样式
          width: '210rpx',
          lineHeight: '70rpx',
          background: 'linear-gradient(90deg, #FA6E3F, #FEAB55)',
          boxShadow: ' 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22)',
          borderRadius: '100rpx',
          fontSize: '28rpx',
          border: 'none',
          color: '#fff',
          margin: '0'
        },
        isDisabled: false, //提交
        showCheckTime: false, //配送时间弹窗。
        checkTime: {}, //配送时间数据
        showExpressType: false, //配送方式弹窗
        expressTypeMap: {
          express: '物流快递',
          selfetch: '到店/自提',
          store: '商家配送',
          autosend: '自动发货'
        },
        expressType: [
          //配送方式
          {
            id: 'e1',
            title: '物流快递',
            value: 'express'
          },
          {
            id: 'e2',
            title: '到店/自提',
            value: 'selfetch'
          },
          {
            id: 'e3',
            title: '商家配送',
            value: 'store'
          },
          {
            id: 'e4',
            title: '自动发货',
            value: 'autosend'
          }
        ],
        storeList: [], //门店列表
        storeInfo: {
          id: 0,
          name: '',
          dispatch_text: ''
        }, //自提点商家信息
        from: '',
        orderType: '',
        grouponBuyType: 'alone',
        grouponId: 0,
        goodsList: [], //传递过来的参数
        perGoodsList: {}, //确认单订单商品
        currentGoodsId: 0, //当前商品id.
        currentSkuId: 0, //商品的规格ID
        // remark: '',
        orderPre: {},
        couponId: 0,
        couponPrice: '选择优惠券',
        expressTypeCur: '',
        inExpressType: [], //当前商品支持的配送方式。

        isProtocol: true, //自提协议。
        selfPhone: '', //编辑手机号
        getFocus: false, //获取焦点。
        checkType: '自提',
        checkTimeCur: 0, //默认选中时间。
        checkTimeId: 'c1', //锚点用
        checkDayCur: 0, //默认日期
        lat: 0, //地理位置
        lng: 0,
        cc: '',
        goodsId: '', //分类id
        goods: [],
        show: false, //支付密码
        paypassword: '',
        group_id: 54, //拼购id
        is_show: false,
        price: '',
        index: 0,
        goodsDetail: {}
      };
    },
    computed: {
      ...mapState({
        storeTcp: ({
          shopro
        }) => shopro?.config?.store
      }),
      expressClass() {
        let cl = 'head-nav--active';
        const {
          expressType,
          expressTypeCur
        } = this;
        if (expressTypeCur === 0) {
          cl = 'head-nav__left--active';
        }
        if (expressTypeCur === expressType.length - 1) {
          cl = 'head-nav__right--active';
        }
        return cl;
      },
      // 是否可以使用优惠券
      hasCoupons() {
        if (this.couponList.length && !this.orderPre.activity_type) {
          return true;
        }
        return Boolean(
          this.couponList.length &&
          this.orderPre.activity_type &&
          this.orderPre.activity_type.indexOf('groupon') === -1 &&
          this.orderPre.activity_type.indexOf('seckill') === -1 &&
          this.orderType !== 'score'
        );
      }
    },
    onShow() {
      // 监听选择自提点
      uni.$once('SELECT_STORE', res => {
        this.storeInfo = JSON.parse(res.storeInfo);
      });
      // 监听地址
      uni.$on('SELECT_ADDRESS', res => {
        if (res.addressData) {
          this.addressData = JSON.parse(res.addressData);
          this.addressId = this.addressData.id;
        } else {
          this.addressId = 0;
        }
        // this.getPre();
        res.addressData && uni.$off('SELECT_ADDRESS');
      });
    },
    async onLoad() {
      // this.goodsList = this.$Route.query.goodsList;
      // this.from = this.$Route.query.from;
      // this.orderType = this.$Route.query.orderType;
      // this.grouponBuyType = this.$Route.query.grouponBuyType;
      // this.grouponId = this.$Route.query.grouponId;
      this.goodsId = this.$Route.query.goodsId;
      // console.log(this.classid,'id')
      await this.init();

      await this.groupList();
    },
    methods: {
      isShow() {
        if (JSON.stringify(this.goodsDetail) === '{}') {
          this.$u.toast('请选择商品')
          return
        }
        this.showSku = true
      },
      goPay(e) {
        // e 为整个商品的参数
        // console.log(e)
        let that = this;
		console.log(that.goods)
        console.log(that.goods[that.index], '选中的');
		console.log(that.goodsDetail)
        uni.setStorage({
          key:'info',
          data:that.goodsDetail,
          success() {
            that.jump('/pages/order/confirm', {
              // goodsList: confirmGoodsList,
              from: 'group',
              remarks: e,
              type: 'group'
              // orderType: that.goodsType,
              // grouponBuyType: that.grouponBuyType,
              // grouponId: that.grouponId
            });
          }
        })
        
      },
      // 组件返回的type;
      changeType(e) {
        console.log(e)
      },
      getSkuText(e) {
        console.log(e)
      },
      groupList() {
        this.$http(
          'goods.groupList', {
            status: 1
          },
        ).then(res => {
          console.log('res', res.data)
          for (let i = 0; i < res.data.list.length; i++) {
            // let timeList = res.data[i].out_time_text.split(':')
            // console.log(timeList)
            // res.data[i].time=timeList[0]*60*60+timeList[1]*60+parseInt(timeList[2])
            this.goods.push({
              ...res.data.list[i],
              chose: res.data.list[i].id == this.goodsId ? true : false
            })
            if (res.data.list[i].id == this.goodsId) {
              this.index = i;
            }
          }
          this.price = res.data.price;
          this.goodsDetail = this.goods[this.index];
          console.log(this.goods)
        });
      },
      radioChange(index) {
        for (let i = 0; i < this.goods.length; i++) {
          this.goods[i].chose = false
        }
        this.goods[index].chose = true
        this.goodsId = this.goods[index].id;
        this.goodsDetail = this.goods[index];
        console.log(this.goodsDetail)
      },
      ...mapActions(['getCartList', 'getMessageIds']),
      init() {
        uni.showLoading({
          title: '加载中...',
          mask: true
        });
        return Promise.all([this.getDefaultAddress(), this.initDate()]).then(() => {
          uni.hideLoading();
        });
      },
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },

      // 格式化选择时间
      initDate() {
        let week = {
          0: '周日',
          1: '周一',
          2: '周二',
          3: '周三',
          4: '周四',
          5: '周五',
          6: '周六'
        };
        let now = new Date().getTime();
        let today = this.$u.timeFormat(now);
        let tomorrow = this.$u.timeFormat(now + 86400000);
        let aftertomorrow = this.$u.timeFormat(now + 172800000);
        let week1 = week[new Date().getDay()];
        let week2 = week[new Date(now + 86400000).getDay()];
        let week3 = week[new Date(now + 172800000).getDay()];
        let obj = {
          day: [{
              title: '今天（' + week1 + '）',
              value: today
            },
            {
              title: '明天（' + week2 + '）',
              value: tomorrow
            },
            {
              title: '后天（' + week3 + '）',
              value: aftertomorrow
            }
          ],
          time: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
            '18:00', '19:00'
          ]
        };
        this.checkTime = obj;
      },

      // 格式日期
      check(type, index) {
        if (type == 'time') {
          this.checkTimeCur = index;
          this.checkTimeId = this.checkTime['time'][index].split(':')[[0]];
        }
        if (type == 'day') {
          this.checkDayCur = index;
        }
      },

      // 获取当前商品配送方式
      getCurGoodsExpress(goods) {
        for (let item of this.goodsList) {
          if (item.goods_id == goods.goods_id && goods.sku_price_id == item.sku_price_id) {
            return this.expressTypeMap[item.dispatch_type];
          }
        }
      },

      // 获取位置
      async getLocation() {
        let authState = await new Auth('userLocation').check();
        // #ifdef MP ||　APP-VUE
        authState &&
          uni.getLocation({
            type: 'gcj02',
            success: res => {
              this.lng = res.longitude;
              this.lat = res.latitude;
              this.getStoreAddress();
            },
            fail: err => {
              console.log('确认订单自提位置：', err);
            }
          });
        // #endif
        // #ifdef H5
        uni.getLocation({
          type: 'gcj02',
          success: res => {
            this.lng = res.longitude;
            this.lat = res.latitude;
            this.getStoreAddress();
          }
        });
        // #endif
      },
      // 获取商品支持的自提点。
      getStoreAddress() {
        let that = this;
        that.$http('goods.storeAddress', {
          id: that.currentGoodsId,
          latitude: that.lat,
          longitude: that.lng
        }).then(res => {
          if (res.code == 1) {
            that.storeInfo = res.data.data[0];
            that.storeList = res.data.data;
          }
        });
      },
      // 订单信息
      getPre() {
        let that = this;
        that.$http('order.pre', {
          goods_list: that.goodsList,
          from: that.from,
          address_id: that.addressId,
          coupons_id: that.couponId,
          order_type: that.orderType,
          buy_type: that.grouponBuyType,
          groupon_id: that.grouponId
        }).then(res => {
          if (res.code === 1) {
            that.orderPre = res.data;
            that.perGoodsList = res.data.new_goods_list;
            that.perGoodsList.map(item => {
              item.selType = item.dispatch_type;
              that.totalNum += item.goods_num;
              that.goodsList.forEach(goods => {
                if (item.goods_id == goods.goods_id && item.sku_price_id == goods
                  .sku_price_id) {
                  goods.dispatch_type = item.dispatch_type;

                  if (item.store_id) {
                    goods.store_id = item.store_id;
                  }
                }
              });
            });
          }
        });
      },
      async groupPeople() {
        let i = -1
        let that = this
        // const sleep = (timeountMS) => new Promise((resolve) => {
        //   setTimeout(resolve, timeountMS);
        // });
        // while (i < 10) {
        //   await that.$http(
        //     'goods.groupPeople', {
        //       group_id: that.group_id
        //     },
        //   ).then(res => {
        //     console.log(res.data.group_user)
        //     let y = 0
        //     let item = res.data.group_user
        //     for (y; y < item.length; y++) {
        //       i++
        //       that.prizeList[y].name = item[y].mobile
        //       that.prizeList[y].image = item[y].avatar
        //     }

        //   });
        //   await sleep(1000)
        // }

      },
      popChose() {
        this.show = false;
        let that = this;
        that.isDisabled = true;
        that.$http(
          'goods.groupindex', {
            address_id: that.addressId,
            goods_id: that.goodsId,
            pay_password: that.paypassword
          },
          '提交中...'
        ).then(res => {
          console.log(res.msg)
          that.paypassword = '';
          // if (res.data.group_id) {
          // this.group_id = res.data.group_id
          // this.open()
          // }
          uni.showToast({
            duration: 2000,
            icon: 'none',
            title: res.msg
          })
          that.isDisabled = false

        });
      },
      // 提交订单
      subOrder() {
        if (!this.addressId) {
          uni.showToast({
            title: '请选择地址',
            icon: 'none',
            duration: 2000
          })
          return
        }
        if (!this.goodsId) {
          uni.showToast({
            title: '请选择商品',
            icon: 'none',
            duration: 2000
          })
          return
        }
        // this.show = true;
        this.$Router.push({
          path: '/pages/order/payment/method',
          query: {
            type: 'group',
            goods_id: this.goodsId,
            address_id: this.addressId,
            price: this.price
          }
        })
        // let that = this;
        // that.isDisabled = true;
        // that.$http(
        // 	'goods.groupindex', {
        // 		address_id:that.addressId,
        // 		goods_id:that.goodsId,
        // 		pay_password:
        // 	},
        // 	'提交中...'
        // ).then(res => {
        // 	that.isDisabled = false;
        // 	if (res.code === 1) {
        // 		that.getCartList();
        // 		that.$Router.replace({
        // 			path: res.data.status > 0 ? `/pages/order/payment/result` :
        // 				`/pages/order/payment/method`,
        // 			query: {
        // 				orderId: res.data.id,
        // 				payState: res.data.status > 0 ? 'success' : 'paying'
        // 			}
        // 		});
        // 	}
        // });
        // that.$http(
        // 	'order.createOrder', {
        // 		goods_list: that.goodsList,
        // 		from: that.from,
        // 		address_id: that.addressId,
        // 		coupons_id: that.couponId,
        // 		remark: that.remark,
        // 		order_type: that.orderType,
        // 		buy_type: that.grouponBuyType,
        // 		groupon_id: that.grouponId
        // 	},
        // 	'提交中...'
        // ).then(res => {
        // 	that.isDisabled = false;
        // 	if (res.code === 1) {
        // 		that.getCartList();
        // 		that.$Router.replace({
        // 			path: res.data.status > 0 ? `/pages/order/payment/result` :
        // 				`/pages/order/payment/method`,
        // 			query: {
        // 				orderId: res.data.id,
        // 				payState: res.data.status > 0 ? 'success' : 'paying'
        // 			}
        // 		});
        // 	}
        // });
      },
      // 按键被点击(点击退格键不会触发此事件)
      valChange(val) {
        // 将每次按键的值拼接到value变量中，注意+=写法
        if (this.paypassword.length < 6) {
          this.paypassword += val;
        }
        if (this.paypassword.length == 6) {
          this.popChose();
        }
        console.log(this.paypassword);
      },
      // 退格键被点击
      backspace() {
        // 删除value的最后一个字符
        if (this.paypassword.length) this.paypassword = this.paypassword.substr(0, this.paypassword.length - 1);
        console.log(this.paypassword);
      },
      // 初始地址
      getDefaultAddress() {
        this.$http('address.defaults', {}, '', false).then(res => {
          if (res.code === 1 && res.data != []) {
            this.addressData = res.data;
            this.addressId = res.data.id;
          }
          console.log(this.addressId, this.addressData)
          // this.getPre();
        });
      },

      // 可用优惠券
      getCoupons() {
        let that = this;
        that.$http('order.coupons', {
          goods_list: that.goodsList,
          from: that.from,
          address_id: that.addressId,
          coupons_id: that.couponId,
          order_type: that.orderType
        }).then(res => {
          if (res.code === 1) {
            that.couponList = res.data;
          }
        });
      },

      // 选择优惠券
      selectCoupon(index) {
        this.couponId = index >= 0 ? this.couponList[index].user_coupons_id : 0;
        this.getPre();
      },

      // 显示配送方式弹窗
      async onSelExpressType(goods) {
        this.showExpressType = true;
        this.inExpressType = goods.detail.dispatch_type_arr;
        this.currentGoodsId = goods.goods_id;
        this.currentSkuId = goods.sku_price_id;
        this.goodsList.forEach(item => {
          if (item.goods_id == this.currentGoodsId && this.currentSkuId == item.sku_price_id) {
            this.expressTypeCur = item.dispatch_type;
            this.selfPhone = item.dispatch_phone ? item.dispatch_phone : this.address && this
              .address.phone;
            this.checkDayCur = item.checkDayCur ? item.checkDayCur : 0;
            this.checkTimeCur = item.checkTimeCur ? item.checkTimeCur : 0;
            if (this.expressTypeCur == 'selfetch') {
              !this.lat && this.getLocation();
              this.storeList.forEach(store => {
                if (item.store_id == store.id) {
                  this.storeInfo = store;
                }
              });
            }
          }
        });
      },
      // 关闭配送方式弹窗
      hideExpressType() {
        this.showExpressType = false;
        this.changeGoodsList();
      },
      // 保存配送方式
      saveExpressType() {
        if (this.expressTypeCur === 'selfetch') {
          if (!this.storeInfo) {
            this.$u.toast('暂无自提点，请选择其他配送方式');
            return false;
          }
          if (!this.isProtocol) {
            this.$u.toast('请先勾选门店协议');
            return false;
          }
        }

        this.showExpressType = false;
        this.changeGoodsList();
        this.getPre();
      },

      // 更改提交数据
      changeGoodsList() {
        this.goodsList.forEach(goods => {
          if (goods.goods_id == this.currentGoodsId && this.currentSkuId == goods.sku_price_id) {
            goods.dispatch_type = this.expressTypeCur;
            goods.dispatch_phone = this.selfPhone;
            goods.dispatch_date = this.checkTime['day'][this.checkDayCur].value + ' ' + this.checkTime[
              'time'][this.checkTimeCur] + ':00';
            if (this.expressTypeCur == 'selfetch') {
              if (!this.storeInfo) {
                this.$u.toast('暂无自提点，请选择其他配送方式');
                return false;
              }
              goods.store_id = this.storeInfo.id;
            }
            goods.checkDayCur = this.checkDayCur;
            goods.checkTimeCur = this.checkTimeCur;
          }
        });
      },

      // 选择快递方式
      changeExpressType(cur) {
        this.expressTypeCur = cur;
        this.getFocus = false;
        cur === 'selfetch' && !this.lat && this.getLocation();
      },

      // 是否同意协议
      checkProtocol() {
        this.isProtocol = !this.isProtocol;
      },
      // 选择配送时间
      checkExpressTime(type) {
        switch (type) {
          case 'store':
            this.checkType = '配送';
            break;
          case 'selfetch':
            this.checkType = '自提';
            break;
          default:
            this.checkType = '自提';
        }
        this.showCheckTime = !this.showCheckTime;
      }
    }
  };
</script>

<style lang="scss">
  .popup_close {
    margin-top: 20rpx;

  }


  $wheelBgUrl: '~static/raffle-wheel/raffle-wheel__bg';

  .home {
    padding: 50px 0;
  }

  .home-title {
    text-align: center;
    margin-bottom: 50px;
  }

  .home-title__text {
    color: #000;
    font-size: 40px;
    font-weight: bold;
  }

  .home-result {
    text-align: center;
    margin-top: 50px;
  }

  .home-result__text {
    color: #000;
    font-size: 20px;
    font-weight: bold;
  }

  .home-wheel {
    text-align: center;
  }

  .raffle-wheel__tip {
    font-size: 24rpx;
  }



  // 收货地址栏
  .head_box {
    background-color: #fff;
  }

  .add-address-box {
    min-height: 100rpx;
    border-bottom: 2px solid #FEAB55;
    ;
    background-size: 100% auto;
    background-position: bottom center;

    .select-notice {
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 40rpx;
    }

    .name,
    .phone {
      font-size: 30rpx;
      font-weight: 500;
    }

    .phone {
      margin: 0 20rpx;
    }

    .tag {
      background: rgba(233, 191, 113, 0.2);
      border-radius: 6rpx;
      padding: 0 16rpx;
      line-height: 38rpx;
      color: #FA6E3F;
      font-size: 22rpx;
    }

    .detail {
      .address {
        margin-top: 25rpx;
        width: 543rpx;
        font-size: 26rpx;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 40rpx;
      }
    }
  }

  // 备注
  .remark-box {
    margin-top: 20rpx;
    background: #fff;
    padding: 25rpx;

    .item-input {
      flex: 1;
      text-align: end;
      font-size: 28rpx;
    }

    .input-pl {
      color: #c4c4c4;
    }
  }

  // 商品卡片
  .goods-list {
    background: #fff;
    margin-top: 20rpx;

    .goods-card {
      min-height: 200rpx;

      .goods-price {
        font-size: 30rpx;
        font-weight: 500;
        width: 480rpx;
        color: #333333;

        .goods-num {
          font-size: 28rpx;
          color: #c4c4c4;
        }
      }

      .order-sku {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        width: 440rpx;
        margin-bottom: 20rpx;

        .order-num {
          margin-right: 10rpx;
        }
      }
    }
  }

  .item-list {
    height: 100rpx;
    background: #fff;
    padding: 0 25rpx;

    .item-title {
      font-size: 28rpx;
      margin-right: 20rpx;
    }

    .detail {
      font-size: 28rpx;
      color: #333;
    }

    .price {
      font-size: 26rpx;
      color: #ff0000;
      margin-right: 40rpx;
    }

    .sel-coupon {
      font-size: 26rpx;
      color: #c4c4c4;
      margin-right: 20rpx;
    }

    .cuIcon-right {
      color: #c4c4c4;
    }
  }

  .logistic,
  .price-box,
  .remark-box,
  .score,
  .coupon {
    border-top: 1rpx solid rgba(#dfdfdf, 0.5);
  }

  .border-top {
    border-top: 1rpx solid rgba(#dfdfdf, 0.5);
  }

  .foot-box-wrap {
    height: calc(100rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    position: relative;
    width: 100%;
    z-index: 70;
  }

  .foot-box {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100rpx + env(safe-area-inset-bottom) / 2);
    border-top: 1rpx solid #eeeeee;
    background-color: #fff;
    z-index: 998;
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    padding: 0 30rpx;

    .btn-hover {
      color: #fff;
    }

    .num {
      font-size: 26rpx;
      color: #999;
    }

    .all-money {
      margin: 0 60rpx 0 20rpx;

      .price {
        color: #ff0000;
      }
    }

    .sub-btn {
      width: 210rpx;
      line-height: 70rpx;
      background: linear-gradient(90deg, #FA6E3F, #FEAB55);
      box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }

  // 弹窗之配送方式
  // 配送方式
  .express-type {
    width: 750rpx;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    height: 700rpx;
    overflow: visible;

    .express-type__head {
      width: 100%;
      height: 80rpx;
      background: #f8e3bd;
      border-radius: 20rpx 20rpx 0 0;

      &-nav {
        width: (750rpx/4);
        position: relative;
        height: 100%;
      }

      .head-nav--active {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        background: #fff;
        width: 100%;
        height: 80rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0px 0px;

        &::after {
          content: '';
          display: block;
          width: 40rpx;
          height: 80rpx;
          position: absolute;
          transform: skewX(20deg);
          background: #fff;
          border-top-right-radius: 20rpx;
          top: 0;
          right: -15rpx;
        }

        &::before {
          content: '';
          display: block;
          width: 40rpx;
          height: 80rpx;
          position: absolute;
          transform: skewX(-20deg);
          background: #fff;
          border-top-left-radius: 20rpx;
          top: 0;
          left: -15rpx;
        }
      }

      .head-nav__left--active {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        background: #fff;
        width: 100%;
        height: 74rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0px 0px;

        &::after {
          content: '';
          display: block;
          width: 40rpx;
          height: 74rpx;
          position: absolute;
          transform: skewX(20deg);
          background: #fff;
          border-top-right-radius: 20rpx;
          top: 0;
          right: -15rpx;
        }
      }

      .head-nav__right--active {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        background: #fff;
        width: 100%;
        height: 74rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0px 0px;

        &::before {
          content: '';
          display: block;
          width: 40rpx;
          height: 74rpx;
          position: absolute;
          transform: skewX(-20deg);
          background: #fff;
          border-top-left-radius: 20rpx;
          top: 0;
          left: -15rpx;
        }
      }

      .head-nav__title {
        font-size: 24rpx;
        font-weight: 500;
        color: #666;
        position: relative;
        z-index: 6;
      }

      .head-nav__title--active {
        color: #a8700d;
        font-size: 26rpx;
      }
    }

    .express-type__content {
      .empty-address {
        height: 120rpx;
        padding: 0 25rpx;
        font-size: 28rpx;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }

      // 无定位
      .location-box {
        height: 500rpx;
        justify-content: center;

        .nolocation-img {
          width: 74rpx;
          height: 90rpx;
          margin-bottom: 40rpx;
        }

        .location-title {
          font-size: 35rpx;

          font-weight: bold;
          color: rgba(70, 53, 27, 1);
          margin-bottom: 20rpx;
        }

        .location-tip {
          font-size: 28rpx;

          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          margin-bottom: 40rpx;
        }

        .open-location {
          width: 492rpx;
          line-height: 70rpx;
          background: linear-gradient(90deg, #FA6E3F, #FEAB55);
          box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
          border-radius: 35rpx;
          font-size: 28rpx;

          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }

      // 快递
      .express-address {
        position: relative;
        padding: 30rpx 25rpx;
        background: url($IMG_URL+'/imgs/order/address_bg.png') no-repeat;
        background-size: 430rpx 300rpx;
        background-position: top right;

        .express-top {
          margin-bottom: 20rpx;
          width: 550rpx;
          text-align: left;

          .address {
            font-size: 28rpx;

            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 40rpx;
            text-align: left;
          }

          .dispatch-notice {
            font-size: 28rpx;

            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 40rpx;
            text-align: left;
          }

          .address-location {
            position: absolute;
            right: 60rpx;
            top: 30rpx;

            .location-img {
              width: 80rpx;
              height: 90rpx;
            }

            .location-text {
              font-size: 18rpx;

              font-weight: 500;
              color: rgba(51, 51, 51, 1);
            }
          }

          .tag {
            background: rgba(233, 191, 113, 0.2);
            border-radius: 6rpx;
            padding: 0 16rpx;
            line-height: 38rpx;
            color: #a8700d;
            font-size: 22rpx;
            margin-right: 20rpx;
          }

          .tag1 {
            background: rgba(53, 190, 105, 0.2);
            border-radius: 6rpx;
            padding: 0 16rpx;
            line-height: 38rpx;
            color: #1bbc50;
            font-size: 22rpx;
            margin-right: 20rpx;
          }

          .address-guide {
            position: absolute;
            right: 25rpx;
            top: 40rpx;
            color: #999999;
          }
        }

        .express-content {
          margin-bottom: 20rpx;

          .box-line {
            width: 1rpx;
            height: 61rpx;
            border-left: 1rpx solid rgba(238, 238, 238, 1);
            margin: 0 40rpx;
          }

          .phone-box1 {

            .name,
            .phone {
              font-size: 26rpx;

              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }

            .phone {
              margin-left: 20rpx;
            }
          }

          .time-box,
          .phone-box {
            text-align: left;
            min-height: 120rpx;

            .box-title {
              font-size: 24rpx;

              font-weight: 400;
              color: #666;
              padding-bottom: 10rpx;
            }

            .box-text {
              font-size: 24rpx;

              font-weight: 500;
              color: #333;
            }

            .edit-phone {
              width: 160rpx;
              font-size: 24rpx;

              font-weight: 500;
              color: #333;
            }

            .box-icon {
              font-size: 28rpx;
              color: #999;
              display: inline-block;
              width: 40rpx;
              text-align: center;
              line-height: 40rpx;
            }
          }
        }

        .express-bottom {
          .protocol {
            font-size: 24rpx;

            font-weight: 400;
            color: rgba(102, 102, 102, 1);

            .protocol-text {
              color: #6487a4;
            }
          }
        }
      }
    }

    .express-type__bottom {
      height: 90rpx;
      padding: 0 30rpx;

      .cancel-btn {
        width: 335rpx;
        line-height: 74rpx;
        background: rgba(238, 238, 238, 1);
        border-radius: 37rpx;
        font-size: 28rpx;

        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }

      .save-btn {
        width: 335rpx;
        line-height: 74rpx;
        background: linear-gradient(90deg, #FA6E3F, #FEAB55);
        border-radius: 37rpx;
        font-size: 28rpx;

        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  // 选择配送给时间
  .checkTime-box {
    background: rgba(255, 255, 255, 1);
    border-radius: 20rpx 20rpx 0px 0px;
    height: 720rpx;
    text-align: center;

    .checkTime-head {
      font-size: 32rpx;

      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 100rpx;
      position: relative;
    }

    .checkTime-foot {
      height: 100rpx;

      .save-btn {
        width: 690rpx;
        line-height: 80rpx;
        background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
        border-radius: 40rpx;
        font-size: 30rpx;

        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }

    .checkTime-content {
      .checkTime-content__left {
        height: 100%;
        width: 190rpx;
        background: #f5f5f5;

        .left-item {
          font-size: 26rpx;

          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          height: 100rpx;
          width: 100%;
        }
      }

      .checkTime-content__right {
        flex: 1;
        height: 100%;
        overflow-y: auto;

        .right-item {
          font-size: 26rpx;

          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          width: 100%;
          text-align: center;
          border-bottom: 1rpx solid rgba(#dfdfdf, 0.6);
          margin: 0 30rpx;
          line-height: 100rpx;
        }
      }

      .item--active {
        font-size: 26rpx;

        font-weight: 500;
        color: rgba(168, 112, 13, 1) !important;
        background-color: #fff;
      }
    }
  }


  .goods_number {
    width: 100%;
  }


  .number_whole {
    background: white;
    padding: 30rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .goods_dan {
      width: 33%;
      font-size: 16rpx;
      text-align: center;
      // float: left;
      margin-top: 30rpx;


      image {
        width: 164rpx;
        height: 164rpx;
      }

      .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      radio-group {
        position: relative;
        bottom: 210rpx;
        left: 70rpx;
      }
    }
  }

  .pop {
    margin: 30rpx;

    .text {
      margin-bottom: 20rpx;
    }
  }

  .pay-pwd {
    text-align: center;
    padding-top: 20rpx;

    .tit {
      display: flex;

      view {
        width: 50%;
      }

      view:nth-child(2n-1) {
        text-align: left;
        text-indent: 0.5em;
      }
    }
  }
</style>
